<template>
	<div class="app-stepper">
		<a-input-number
			v-model:value="value"
			:min="min"
			:max="max"
			:step="step"
			:precision="precision"
			:disabled="disabled || readOnly"
			:controls="false"
			@change="onChange"
		>
			<template #addonBefore>
				<a-button
					type="text"
					:disabled="disabled || readOnly || value <= min"
					@click="btnReduce"
					>-</a-button
				>
			</template>
			<template #addonAfter>
				<a-button
					type="text"
					:disabled="disabled || readOnly || value >= max"
					@click="btnIcrease"
					>+</a-button
				>
			</template>
		</a-input-number>
	</div>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { stepProps } from './stepper';
import { useEditorTypeParams } from '@/hooks/use-editor';
const props = defineProps(stepProps);
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const value = toRef(props, 'value');
const onChange = ($event: any) => {
	let value_temp = $event;
	if (value_temp > props.max) {
		value_temp = props.max;
	} else if (value_temp < props.min) {
		value_temp = props.min;
	}
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: value_temp,
	});
};

// 减少
const btnReduce = () => {
	let value_temp: any = value.value ? value.value : 0;
	value_temp -= props.step;
	onChange(value_temp);
};
// 增加
const btnIcrease = () => {
	let value_temp: any = value.value ? value.value : 0;
	value_temp += props.step;
	onChange(value_temp);
};
</script>
